import React, { Component } from 'react';
import { HashRouter, BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
import Custor from './Custor';
import System from './System';
import Error from './error';
import Nan from './Nan'
class App extends Component {
    render() {
        return (
            <HashRouter>
                <Nan />
                <main>
                    {/* HashRouter:路由容器;Route:设置路由规则 */}
                    {/*
                     react-router路由特点：
                     1.不管当前规则是否匹配，依然会向下匹配查找，我们想要的是某一条规则匹配后不再向下匹配=> react路由可以把路由规则基于Switch包裹起来即可,匹配到之后不再向下匹配
                     2.默认路由匹配的规则是不精准也不严格的，我们可以给规则上设置exact(精准匹配) strict(严格匹配)===> exact一般应用于第一个路由->根目录 
                     Redirect:实现路由的跳转重定向
                    */}
                    <Switch>
                        {/* <Route path='/' exact component={Custor} /> */}
                        {/* 跳转路由 */}
                        <Redirect from='/' to='/Custor' exact />
                        <Route path='/Custor' component={Custor} />
                        <Route path='/System' component={() => {
                            // 路由守卫，可以做权限管理
                            let power = localStorage.getItem('power');
                            if (power) {
                                return <System />;
                            }
                            return '你没有权限!';
                        }} />
                        {/* 以上规则都不符合就跳转--->404处理 */}
                        {/* <Redirect to="/"/> */}
                        <Route path='*' component={Error} />
                    </Switch>

                </main>
            </HashRouter>
        );
    }
}

export default App;